<template>
  <view
    class="my-button"
    :class="[
      type ? 'my-button--' + type : '',
      size ? 'my-button--' + size : '',
      {
        'my-button--plain': plain,
        'my-button--loading': loading,
        'my-button--disabled': disabled
      },
      customClass
    ]"
    :hover-class="!disabled && !loading ? 'my-button--hover' : ''"
    :hover-start-time="hoverStartTime"
    :hover-stay-time="hoverStayTime"
    @click="onClick"
  >
    <view v-if="loading" class="my-button__loading"></view>
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'my-button',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: (value) => {
        return ['default', 'primary', 'warn'].includes(value)
      }
    },
    size: {
      type: String,
      default: 'default',
      validator: (value) => {
        return ['default', 'mini'].includes(value)
      }
    },
    plain: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    hoverStartTime: {
      type: [Number, String],
      default: 20
    },
    hoverStayTime: {
      type: [Number, String],
      default: 70
    },
    customClass: {
      type: String,
      default: ''
    }
  },
  emits: ['click'],
  methods: {
    onClick(e) {
      if (this.disabled || this.loading) return
      this.$emit('click', e)
    }
  }
}
</script>

<style>
.my-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  height: 36px;
  border-radius: 18px;
  overflow: hidden;
  color: var(--text-color);
  background-color: var(--bg-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  word-break: keep-all;
  border: none;
  box-shadow: 0 2px 6px var(--shadow-color);
}

.my-button::after {
  border: none;
}

.my-button--primary {
  color: var(--text-on-primary-color);
  background: var(--primary-color);
  box-shadow: 0 2px 6px var(--primary-color-shadow, rgba(0, 122, 255, 0.3));
}

.my-button--warn {
  color: #fff;
  background: var(--error-color);
  box-shadow: 0 2px 6px var(--error-color-shadow, rgba(230, 67, 64, 0.3));
}

.my-button--mini {
  height: 32px;
  font-size: 12px;
  padding: 0 12px;
}

.my-button--plain {
  background: transparent;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  box-shadow: none;
}

.my-button--primary.my-button--plain {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.my-button--warn.my-button--plain {
  border-color: var(--error-color);
  color: var(--error-color);
}

.my-button--hover {
  opacity: 0.9;
  transform: translateY(1px);
}

.my-button--disabled {
  cursor: not-allowed;
  box-shadow: none;
}

.my-button--disabled.my-button--primary {
  background: #a8a8a8;
  color: #ffffff;
}

.my-button--disabled.my-button--warn {
  background: #a8a8a8;
  color: #ffffff;
}

.my-button--disabled.my-button--default {
  background: #d9d9d9;
  color: #ffffff;
}

.my-button--disabled.my-button--plain {
  background: transparent;
  border-color: #d9d9d9;
  color: #d9d9d9;
}

.my-button--disabled .my-button__loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,0.3)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,0.4)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,0.5)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,0.6)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,0.7)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,0.8)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,0.9)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ffffff' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ffffff' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ffffff' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ffffff' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ffffff' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
}

.my-button text {
  white-space: nowrap;
  word-break: keep-all;
}
</style> 